<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2021/11/2
  Time: 13:36
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        a{
            text-decoration: none;
            color: white;
        }
        a:hover{
            text-decoration: none;
            color: grey;
        }
        #pagingul{height: 34px;}
        #pagingul1{
            height: 34px;
            float: right;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row clear">
        <div class="row-md-12">
            <div class="page-header"></div>
        </div>
    </div>

    <div class="row clear">
        <div class="row-md-12">
            <%--查询--%>
            <%--交给Ajax--%>
            <div class="row clear">
                <div class="col-md-9">
                    <div class="form-inline">
                        <input style="width: 300px" type="text" class="form-control" id="queryProCode" placeholder="ProCode">
                        <input style="width: 300px" type="text" class="form-control" id="queryProName" placeholder="ProName">
                        <button class="btn btn-primary" id="providerQueryBtn" onclick="show()" style="height: 34px;">
                            &emsp;<span class="glyphicon glyphicon-search"></span>&emsp;
                        </button>
<%--                        <input type="button" class="btn btn-primary" value="Query" id="providerQueryBtn" onclick="show()">--%>
                    </div>
                </div>
            </div>

            <%--添加
                系统管理员没有对供应商增加的权限
            --%>
            <c:if test="${sessionScope.userSession.userRole!=1}">
                <div class="col-md-offset-11">
                    <button type="button" class="btn btn-danger">
                        <a href="${pageContext.request.contextPath}/user/providerDo/addPage">&emsp;<span class="glyphicon glyphicon-plus"></span>Add&emsp;</a>
                    </button>
                </div>
            </c:if>
        </div>
    </div>

    <div class="row clearfix">
        <div class="row-md-12">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>proCode</th>
                    <th>proName</th>
                    <th>proContact</th>
                    <th>proPhone</th>
                    <th>proFax</th>
                    <th>creationDate</th>
                </tr>
                </thead>
                <tbody id="tbodyProviderList">

                </tbody>
            </table>

            <%--翻页按钮--%>
            <div id="pagingdiv">
                <nav aria-label="Page navigation">
                    <ul class="pagination" id="pagingul"></ul>
                    <ul class="pagination" id="pagingul1"></ul>
                </nav>
            </div>

        </div>
    </div>
</div>
<%@include file="viewprovider.jsp"%>
<!-- 模态框   信息删除确认 -->
<div class="modal fade" id="delcfmOverhaul">
    <div class="modal-dialog">
        <div class="modal-content message_align">
            <div class="modal-header">
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <!-- 隐藏需要删除的id -->
                <input type="hidden" id="deleteProviderId" name="deleteProviderId" />
                <input type="hidden" id="deleteProviderName" name="deleteProviderName" />
                <p> 请您慎重删除，删除该条信息的同时也会删除相应的订单信息。
                    您确认要删除该条信息吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">取消</button>
                </button>
                <button type="button" class="btn btn-danger" id="deleteHaulBtn">delete</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<%--这两个导入有顺序--%>
<script src="${pageContext.request.contextPath}/webjars/jquery/3.6.0/jquery.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script>
    //总记录数
    let totalNum;
    //总页数
    let totalPage;
    //默认每页显示数
    let pageSize = 7;
    //默认显示第一页
    let currentPageNo = 1;

    // 打开询问是否删除的模态框并设置需要删除的ID
    let showDeleteModal = function (proId,proName) {
        console.log('\n要删除的供应商id与名称为：'+proId+','+proName);
        let delete_id = proId;
        let delete_name = proName;// 获取隐藏的姓名
        $("#deleteProviderId").val(delete_id);// 将模态框中需要删除d的name设为需要删除的name
        $("#deleteProviderName").val(delete_name);// 将模态框中需要删除的ID设为需要删除的ID
        $("#delcfmOverhaul").modal({
            // backdrop : 'static', backdrop：’static’指的是点击背景空白处不被关闭；
            //keyboard: false指的是触发键盘esc事件时不关闭。
            keyboard : false
        });
    }

    // 查看信息模态框的内容
    let CheckModalContent = function (id) {
        $.ajax({
            url: "${pageContext.request.contextPath}/user/providerDo/check",
            type: "POST",
            data: {
                id: id
            },
            success: function (data) {
                let provider =data;
                let html = "<p><strong>供应商编码：</strong><span>"+provider.proCode+"</span></p>"+
                "<p><strong>供应商名称：</strong><span>"+provider.proName+"</span></p>"+
                "<p><strong>联系人：</strong><span>"+provider.proContact+"</span></p>"+
                "<p><strong>联系电话：</strong><span>"+provider.proPhone+"</span></p>"+
                "<p><strong>传真：</strong><span>"+provider.proFax+"</span></p>"+
                "<p><strong>描述：</strong><span>"+provider.proDesc+"</span></p>";
                $('#checkModel').html(html);
            }
        })
        $("#CheckView").modal({
            keyboard : false
        });
    }

    //跳转页面
    let JumpPage = function () {
        let page = $('#page').val();
        console.log("\n要跳转的页数为"+page);
        currentPageNo = page;
        getProviderList('${pageContext.request.contextPath}/user/providerDo/query','POST');
    }

    function show() {
        console.log('\n查询的ProCode：'+$('#queryProCode').val());
        console.log('查询的ProName：'+$('#queryProName').val());
    }

    $(function () {
        //查询按钮
        $('#providerQueryBtn').click(function(){
            //根据新的查询条件查询时返回第一页
            currentPageNo = 1;
            getProviderList("${pageContext.request.contextPath}/user/providerDo/query",'GET');
            <%--totalNum = ${pageContext.request.getAttribute("totalNum")};--%>
            <%--console.log('总数'+totalNum);--%>
            <%--totalPage = ${pageContext.request.getAttribute("totalPage")};--%>
            <%--console.log('页数'+totalPage);--%>
        });
        //删除确认按钮
        $('#deleteHaulBtn').click(function(){
            let providerId = $("#deleteProviderId").val();
            let providerName = $("#deleteProviderName").val();
            let url = '${pageContext.request.contextPath}/user/providerDo/delete?id='+providerId;
            $("#delcfmOverhaul").modal('hide');
            getProviderList(url,'GET');
        });
        //设置分页栏点击时候的高亮
        $("#pagingul").on("click","li",function(){
            //获取<a>标签中的value值
            let url = '${pageContext.request.contextPath}/user/providerDo/query';
            let aText = $(this).find('a').html();
            console.log("");
            console.log('被点击分页标签li，a的内容为：'+aText);
            checkA();
            if (aText.search("Prev")!==-1){
                currentPageNo = currentPageNo-1;
                $(".pagination > li").removeClass("active");
                $("#"+currentPageNo).addClass("active");
                getProviderList(url,'GET');
                checkA();
            }else if(aText.search("Next")!==-1){
                currentPageNo = currentPageNo+1;
                $(".pagination > li").removeClass("active");
                $("#"+(currentPageNo)).addClass("active");
                getProviderList(url,'GET');
                checkA();
            }else{
                console.log("被点击页数的li标签id为："+this.id);
                //不能直接写this.id这样会使currentPageNo变成字符串
                //按下一页时currentPageNo+1会变成字符串的拼接  ‘11’
                currentPageNo = parseInt(this.id);
                getProviderList(url,'GET');
                $(".pagination > li").removeClass("active");
                $(this).addClass("active");
            }
        })
    })

    function getProviderList(url,type) {
        $.ajax({
                url:url,
                type:type,
                data:{
                    queryProCode:$('#queryProCode').val(),
                    queryProName:$('#queryProName').val(),
                    currentPageNo:currentPageNo,
                    pageSize:pageSize
                },
                success: function (data){
                    totalNum = data.totalNum;
                    totalPage = data.totalPage;
                    let proList = data.providerList;
                    console.log("ajax返回的数据："+data);
                    console.log(data);
                    console.log("查到的数据总条数："+totalNum);
                    console.log("查到的数据总条页数："+totalPage);
                    console.log("当前页："+currentPageNo);
                    let html = "";
                    for (let i = 0; i < proList.length; i++) {
                        let id = proList[i].id;
                        let name = proList[i].proName;
                        html += '<tr>'+
                            '<td>'+proList[i].proCode+'</td>'+
                            '<td>'+proList[i].proName+'</td>'+
                            '<td>'+proList[i].proContact+'</td>'+
                            '<td>'+proList[i].proPhone+'</td>'+
                            '<td>'+proList[i].proFax+'</td>'+
                            '<td>'+proList[i].creationDate+'</td>'+
                            '<td>'+
                            '<button type="button" class="btn btn-info" onclick="CheckModalContent('+id+');">'+
                            '<a href="javascript:void(0)">check</a>'+
                            '</button>'+
                            '<button type="button" class="btn btn-warning">'+
                            '<a href="${pageContext.request.contextPath}/user/providerDo/modifyPage?id='+id+'">update</a>'+
                            '</button>';
                        if(${sessionScope.userSession.userRole!=1}){
                            html+='<button type="button" class="btn btn-danger" onclick="showDeleteModal('+id+',\''+name+'\');">'+
                                '<a href="javascript:void(0)">delete</a>'+
                                '</button>';
                        }
                        html+='</td>'+
                            '</tr>';
                    }
                    initPagination(totalPage,totalNum);
                    $('#tbodyProviderList').html(html);
                }
            }
        )
    }

    //初始化分页栏
    function initPagination(totalPage,totalNum) {
        let html = '';
        // &laquo;&raquo;
        html += '<li>'+
                    '<a aria-label="Previous" href="javascript:void(0);" id="prev">'+
                         '<span aria-hidden="true">Prev</span>'+
                    '</a>'+
                '</li>';
        for (let i = 1; i <= totalPage; i++) {
            html +='<li id="'+i+'">' +
                        '<a href="javascript:void(0);" >' +
                             i +
                        '</a>'+
                   '</li>';
        }
        html += '<li>'+
                    '<a aria-label="Next" href="javascript:void(0);"  id="next">'+
                         '<span aria-hidden="true">Next</span>'+
                    '</a>'+
                '</li>';
        let html1 = "<span>共"+totalPage+"页 第</span>"+
            "<input type='number' id='page' value='"+currentPageNo+"' min='1' max='"+totalPage+"' style='height: 34px'>"+
            "<button class='btn btn-default' style='height: 34px' onclick='JumpPage()'>跳转</button>";
        $('#pagingul').html(html);
        $('#pagingul1').html(html1);
        //$('#pagingdiv').html('<h4>共有'+totalNum+'条记录<h4/>');
        $("#"+currentPageNo).addClass("active");
        checkA(currentPageNo);
    }

    //主要是用于检测当前页如果为首页，或者尾页时，上一页和下一页设置为不可选中状态
    function checkA(currentPageNO) {
        currentPageNO == 1 ? $("#prev").addClass("btn btn-default disabled") : $("#prev").removeClass("btn btn-default disabled");
        currentPageNO == totalPage ? $("#next").addClass("btn btn-default disabled") : $("#next").removeClass("btn btn-default disabled");
    }

    //页面加载时初始化providerList与分页按钮
    $(document).ready(function () {
        show();
        getProviderList("${pageContext.request.contextPath}/user/providerDo/query",'GET');
    })

</script>


</body>
</html>
